<template>
    <el-form :inline="true" :model="searchOptions" ref="contentForm">
        <el-form-item v-for="(model, index) in searchMap" :prop="model.key" :key="index" :label="model.label"  :rules="model.rules">
            <template v-if="model.type === 'input'">
                <!-- 输入框 -->
                <el-input
                    v-model.trim="searchOptions[model.key]"
                    :placeholder="model.placeholder"
                    clearable
                    @clear="inputClear(model)"
                    v-on="model.events||{}"
                />
            </template>
            <template v-else-if="dateArray.includes(model.type)">
                <!-- 日期选择器 -->
                <el-date-picker
                    v-model="searchOptions[model.key]"
                    :format="model.format"
                    :value-format="model.format"
                    :type="model.type"
                    align="center"
                    unlink-panels
                    :disabled-date="model.pickerOptions"
                    range-separator="至"
                    :start-placeholder="model.placeholder.start||'开始日期'"
                    :end-placeholder="model.placeholder.end||'结束日期'"
                    @change="timeChange(searchOptions[model.key], index)"
                    v-on="model.events||{}"
                />
            </template>
            <template v-else-if="model.type === 'radio'">
                <!-- 单选框组 -->
                <el-radio-group v-model="searchOptions[model.key]">
                    <el-radio
                        v-for="radio in model.group"
                        :key="radio.id"
                        :label="searchOptions[model.key]"
                    >{{ radio.label }}
                    </el-radio>
                </el-radio-group>
            </template>
            <template v-else-if="model.type === 'cascader'">
                <!-- 级联选择器 -->
                <el-cascader
                    :options="model.options"
                    :show-all-levels="false"
                />
            </template>
            <template v-else>
                <!-- 下拉框 -->
                <el-select
                    v-model="searchOptions[model.key]"
                    :placeholder="model.placeholder"
                    :class="'select-id-' + searchOptions[model.key] || model.selectClass"
                    @change="selectChange(model,index)"
                    clearable
                >
                    <el-option
                        v-for="item in model.options"
                        :key="item.value + item.label"
                        :label="item.label"
                        :value="item.value"
                    />
                </el-select>
            </template>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="searchFun">查询</el-button>
            <el-button @click="resetFun">重置</el-button>
        </el-form-item>
    </el-form>

</template>

<script setup>
import { onMounted, reactive, ref } from 'vue'
import { parseTime } from '@/utils/formatTime'

const emit = defineEmits(['mis-search', 'mis-reset'])
const props = defineProps({
    searchMap: {
        // 搜索模块
        type: Array,
        require: true,
        default: () => {
            return [
                // 搜索模块
                // {
                //   label:'测试：' // 标签
                //   type: 'select', // 类型：select：下拉框、input：输入框、date：日期框、radio：单选框组
                //   prop: 'name', // 字段名
                //   value: '', // 绑定值
                //   options: [], // 选项
                //   placeholder: '测试' // 占位符
                //   notClear: true, // 重置是否清空
                //   placeholder: { // 范围日期选择器占位符
                //   start: '选择巡查开始时间',
                //   end: '选择巡查结束日期'
                //   }
                //   group:[{ label: '是', value: '1' }, // 单选框组
                //         { label: '否', value: '0' }]
                // }
            ]
        }
    },
    searchOptions:{type: Object,required:true}
})
//子组件rule校验方法
const contentForm = ref(null)
function validate(callback) {
  contentForm.value.validate((valid) => {
    callback(valid)
  })
}
const searchArr = ref(null) // 搜索字段和值
const pickerOptions = reactive({
    pickerOptions: { // 禁止选事件日期格式后面的数据
        disabledDate: (time) => {
            return time.getTime() > new Date()
        }
    }
})
const dateArray = ref(['year', 'month', 'date', 'dates', 'week', 'datetime', 'datetimerange', 'daterange', 'monthrange'])
onMounted(() => {
    // this.$loadingFun(() => this.searchStyle(), 100)
})
const selectChange = (data, i) => {// 下拉筛选框改变
    data.selectClass = data.value
    // this.$set(this.searchMap, i, data) // 设置数据更新
}
const inputClear = (data) => {// 输入框清空
    data.value = ''
}
// 日期选择框改变
const timeChange = (data, index) => {
    // props.searchMap[index].value = data

}
// 查询方法
const searchFun = () => { // 查询方法
    emit('mis-search')
}
const resetFun = () => { // 重置方法
    searchArr.value = null
    emit('mis-reset')
}
defineExpose({
  validate
})
</script>

<style lang="scss" scoped>

</style>

